import { Form, Input, Button, Checkbox, message } from 'antd';
import axios from 'axios';
import { connect } from 'react-redux'
import React from 'react'
import {Login} from '../../store/actions'
function Index(props) {
    const layout = {
        labelCol: { span: 4 },
        wrapperCol: { span: 8 },
      };
      const tailLayout = {
        wrapperCol: { offset: 8, span: 16 },
      };
      const onFinish = values => {
            props.login(values)
      };
    
      const onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
      };
    return (
        <div>
            <h3>登录</h3>
        <Form
      {...layout}
      name="basic"
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      <Form.Item
        label="用户名"
        name="username"
        rules={[{ required: true, message: '请输入用户名' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="密码"
        name="password"
        rules={[{ required: true, message: '请输入密码' }]}
      >
        <Input.Password />
      </Form.Item>
      <Form.Item {...tailLayout} name="remember" valuePropName="checked">
        <Checkbox>Remember me</Checkbox>
      </Form.Item>
      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
    </div>
    )
}
const mapStateToProps = (store, props) => {
    return {

    }
}
const mapDispatchToProps = (dispatch, props) => {
    return {
        login:(obj)=>{ Login(dispatch,props,obj) }
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Index)
